<template>
    <a href="javascript:" class="tar-bar-item" @click="clic()">
        <slot v-if="!isactive" name="img"></slot>
        <slot v-else  name="img-active"></slot>
        <slot name="text"></slot>
    </a>
</template>
<script>
export default {
    computed:{
        isactive(){
            return this.$route.path.indexOf(this.path) !== -1
        }
    },
    props: {
        path: String,
    },
    methods:{
        clic(){
            this.$router.replace(this.path)
        }
    }
}
</script>
<style scoped>
.tar-bar-item{
  flex: 1;
  text-align: center;
  height: 49px;
}
.tar-bar-item span{
    font-size: 20px;
}
.tar-bar-item div{
    font-size: 14px;
}
</style>